<template>
	<s-layout :title="state.title" :bgStyle="{ color: '#f5f5f5' }">
		<!-- <su-sticky bgColor="#fff">
		  <su-tabs
		    :list="tabMaps"
		    :scrollable="false"
		    @change="onTabsChange"
		    :current="state.currentTab"
		  ></su-tabs>
		</su-sticky> -->
		
		<view class="car-list" v-if="state.pagination.total > 0">
			<s-car-item v-for="item in state.pagination.data" :item="item"></s-car-item>
		</view>
		<s-empty v-else text="暂无数据" icon="/static/data-empty.png" />
		
		<uni-load-more
		  v-if="state.pagination.total > 0"
		  :status="state.loadStatus"
		  :content-text="{
		    contentdown: $t('pages.user.wallet.load'),
		  }"
		  @tap="onLoadMore"
		/>
	</s-layout>
</template>

<script setup>
	import { reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';
	
	const pagination = {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1
	};
	const state = reactive({
		car_brand_id: '',
		title: '',
		currentTab: 0,
		pagination,
		loadStatus: ''
	})
	const tabMaps = [
		{ name: '在售', value: '1'},
		{ name: '未售', value: '2'},
		{ name: '停售', value: '3'},
	]
	
	async function getCarList(page = 1, list_rows = 8) {
		const res = await sheep.$api.car.carData({
			car_brand_id: state.car_brand_id,
			list_rows,
			page,
		})
		if (res.code === 1) {
			let list = _.concat(state.pagination.data, res.data.data);
			state.pagination = {
				...res.data,
				data: list
			};
			if (state.pagination.current_page < state.pagination.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
	
	function onTabsChange() {
		
	}
	
	onLoad(async (options) => {
		state.car_brand_id = options.car_brand_id
		state.title = options.title
		
	    await getCarList();
	});
	
	function onLoadMore() {
	    if (state.loadStatus !== 'noMore') {
	      getCarList(state.pagination.current_page + 1);
	    }
	}
	onReachBottom(() => {
		onLoadMore();
	});
</script>

<style lang="scss" scoped>
	.car-list {
		background-color: #fff;
		padding: 0 30rpx;
	}
</style>